<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="partial/layout" lang="zh">
<head>
<style type="text/css">
</style>
<link href="https://cdn.bootcss.com/tinymce/4.7.13/plugins/codesample/css/prism.css" rel="stylesheet">
</head>
<body>
	<div layout:fragment="main">
			<h1 class="t_nav">
				<span>您现在的位置是：首页 > {{articleItem.categoryName}}</span><a href="/" class="n1">回首页</a>
			</h1>
			<div class="infosbox">
				<div class="newsview">
					<h3 class="news_title">{{articleItem.title}}</h3>
					<div class="bloginfo">
						<ul>
							<li class="author"><a href="/">{{articleItem.author}}</a></li>
							<li class="lmname"><a href="/">{{articleItem.categoryName}}</a></li>
							<li class="timer">{{articleItem.publishTime}}</li>
							<li class="view">{{articleItem.showCount}}</li>
							<li class="like">8888888</li>
						</ul>
					</div>
					<div v-if="articleItem.articleTags" class="tags">
						<a href="/" target="_blank" v-for="tag in articleItem.articleTags"> {{tag}} </a>
					</div>
					<div class="news_about">
						<strong>简介</strong>{{articleItem.abstractContent}}
					</div>
					<div class="news_con" v-html="articleItem.content"></div>
				</div>
				<!--PC和WAP自适应版-->
				<div id="SOHUCS" :sid="articleItem.id" ></div> 
				
			</div>
			<div class="sidebar">
				<div class="tuijian">
					<h2 class="hometitle">推荐文章</h2>
					<ul class="tjpic">
						<i><img th:src="@{/images/blog/toppic01.jpg}"></i>
						<p>
							<a href="/">别让这些闹心的套路，毁了你的网页设计</a>
						</p>
					</ul>
					<ul class="sidenews">
						<li><i><img th:src="@{/images/blog/toppic01.jpg}"></i>
							<p>
								<a href="/">别让这些闹心的套路，毁了你的网页设计</a>
							</p> <span>2018-05-13</span></li>
						<li><i><img th:src="@{/images/blog/toppic02.jpg}"></i>
							<p>
								<a href="/">给我模板PSD源文件，我给你设计HTML！</a>
							</p> <span>2018-05-13</span></li>
						<li><i><img th:src="@{/images/blog/v1.jpg}"></i>
							<p>
								<a href="/">别让这些闹心的套路，毁了你的网页设计</a>
							</p> <span>2018-05-13</span></li>
						<li><i><img th:src="@{/images/blog/v2.jpg}"></i>
							<p>
								<a href="/">给我模板PSD源文件，我给你设计HTML！</a>
							</p> <span>2018-05-13</span></li>
					</ul>
				</div>
				<!-- 设置固定关注我们 -->
				<div th:include="partial/focus::focus"></div>
			</div>
	</div>
	<div layout:fragment="js">
	<script src="https://cdn.bootcss.com/tinymce/4.7.13/plugins/codesample/plugin.min.js"></script>
	<script type="text/javascript"> 
				(function(){ 
				var appid = 'cytGj3Fbi'; 
				var conf = '815f1fb3a79830076ae4ccb6e7613138'; 
				var width = window.innerWidth || document.documentElement.clientWidth; 
				if (width < 960) { 
				window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); 
				</script>
	<script th:inline="javascript" type="text/javascript">
    var initArticleModel=function(){
		var articleModel=[[${articleModel}]];
		//debugger;
		if(articleModel!=null){
			this.articleItem.status=articleModel.status;
			this.articleItem.title=articleModel.title;
			this.articleItem.author=articleModel.author;
			this.articleItem.content=articleModel.content;
			this.articleItem.abstractContent=articleModel.abstractContent;
			this.articleItem.coverImageList=articleModel.coverImageList;
			this.articleItem.publishTime=articleModel.publishTime;
			this.articleItem.id=articleModel.id;
			this.articleItem.showStyle=articleModel.showStyle;
			this.articleItem.categoryId=articleModel.categoryId;
			this.articleItem.categoryName=articleModel.category.categoryName;
			this.articleItem.openComment=articleModel.openComment;
			this.articleItem.articleTags=articleModel.articleTags;
			var tagLists=articleModel.articleTags.split(',');
			this.articleItem.articleTags=tagLists;
		}
		
	}
   
    var app = new Vue({
    	  el: '#app',
    	  data: {
    		articleItem:{
	  			  status: '0',
	  			  title: '', // 文章题目
	  			  author:'',
	  			  categoryId:0,
	  			  categoryName:'',
	  			  content: '', // 文章内容
	  			  abstractContent: '', // 文章摘要
	  			  coverImageList: [], // 文章图片
	  			  publishTime: undefined, // 前台展示时间
	  			  showStyle:0,
	  			  id: 0,
	  			  openComment: 0,//打开评论
	  			  articleTags: [],
	  			},
    		showMore:true,
    		loading:true,
    	    offset:300,
    	    offset_opacity:1200,
    	    scroll_top_duration:700,
    	    scrollTop:0,
    	    defaultfollowUsPosition:0,
    	    followUsPosition:0
    	  },
    	  mounted() {
    		   // 缓存指针  
              let _this = this;  
              _this.defaultfollowUsPosition=this.$refs.followUs.offsetTop;
              // 注册scroll事件并监听  
		      window.addEventListener('scroll', ()=> {
        		var scrollTop = document.documentElement.scrollTop;
                _this.scrollTop=scrollTop;
        		 var followUsPosition = this.$refs.followUs.offsetTop;
        		 _this.followUsPosition=followUsPosition;
        		 if(scrollTop<=_this.defaultfollowUsPosition ){
         			 _this.followUsPosition=_this.defaultfollowUsPosition;
         		 }
		      })
		      
    	  },
    	  created(){
    		  this.initArticleModel(); 
    	  },
   	 	  methods:{
   	 		initArticleModel:initArticleModel,
   	 	    backToTop(){
   	 	      document.body.scrollTop = 0;
   	 	      document.documentElement.scrollTop = 0;
   	 	    }
   	 	  }
    	}) 
    </script>
    </div>
</body>
</html>